<template>
	<view class="content">
		<u-navbar :autoBack="true" bgColor="rgba(0,0,0,0)" :fixed="true" @click-left="$back" ></u-navbar>
		
		<image :src="'/images/login-bg.png' | formatImgUrl" class="bei" mode=""></image>
		<view class="title">
			账号密码登录
		</view>
		<view class="weitxt">
			请输入已注册的昵称、手机号、邮箱登录
		</view>
		<view class="baibox">
			<u--input class="baiput" placeholder="请输入账号" border="surround" clearable v-model="mobile" maxlength="11"></u--input>
		</view>
		<view class="baibox">
			<u--input class="baiput" :type="[isShowPassword ? 'text' : 'password']" v-model="password" placeholder="请输入密码" border="surround" clearable></u--input>
			<image class="yanpic" :src="[isShowPassword ? '../../static/images/yana.png' : '../../static/images/yan.png']"
				@click="togglePassword" />
		</view>
		
		<view class="lubox" @click="login">
			登录
		</view>
		<view class="dlbox">
			<view class="dltxt" @click="$go('/pages/login/phone')">
				手机号验证登录
			</view>
			<view class="dltxt"  @click="$go('/pages/login/resetting')">
				<text>忘记了? </text>
				找回密码
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				mobile: '',
				password: '',
				isShowPassword: false
			}
		},
		
		onLoad() {},
		methods: {
			login(){
				this.$api.default.request('user/userLogin', {
					mobile: this.mobile,
					password: this.password
				}).then((res) => {
					if (res.code) {
						this.$common.errorToShow(res.msg, () => {	
							// if(!res.user.like_content_tags && !res.user.like_writer_tags){
							// 	uni.reLaunch({
							// 		url:'/pages/login/hobby'
							// 	})
							// }else{
								
								this.$db.set('auth',res.token)
								this.$db.set('userInfo',res.user)
								getApp().getIMchat()
								uni.reLaunch({
									url:'/pages/index/index'
								})
							// }
						})
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			togglePassword() {
				this.isShowPassword = !this.isShowPassword
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(242, 245, 242, 1);
	}

	.content {
		position: relative;
		padding: 80rpx 60rpx;
		padding-top: 154px;

		.bei {
			width: 100%;
			height: 100vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: -1;
		}

		.title {
			font-size: 48rpx;
			font-weight: bold;
			letter-spacing: 0.08em;
			line-height: 70rpx;
			color: #3D3D3D;
			padding-bottom: 16rpx;
		}

		.weitxt {
			font-size: 24rpx;
			font-weight: normal;
			letter-spacing: 0.24em;
			color: #999999;
			padding-bottom: 60rpx;
		}

		.baibox {
			padding: 0 28rpx;
			height: 98rpx;
			border-radius: 8px;
			opacity: 1;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.left {
				display: flex;
				align-items: center;
				flex-shrink: 0;
				padding-right: 16rpx;
				.letxt {
					font-size: 28rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D; 
					padding-right: 6rpx;
				}

				.lepic {
					width: 16rpx;
					height: 12rpx;
				}
			}

			.baiput {
				padding-left: 14rpx;
				flex-grow: 1;
				font-size: 32rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #3D3D3D;
			}
			.yanpic{
				width: 52rpx;
				height: 52rpx;
			}
		}

		
		.lubox{
			width: 630rpx;
			height: 86rpx;
			border-radius: 8px;
			line-height: 86rpx;
			margin: 0 auto 20rpx;
			opacity: 1;
			background: #45C4B0;
			font-size: 32rpx;
			font-weight: bold;
			letter-spacing: 0em;
			text-align: center;
			color: #FFFFFF;
			border: 1px solid #45C4B0;
		}
		.u-border {
			border-width: 0 !important;
			padding: 0 !important;
		}

		.u-input__content__field-wrapper__field {
			font-size: 32rpx !important;
			letter-spacing: 0em !important;
			color: #3D3D3D !important;
		}
		.u-button--mini.data-v-3bf2dba7 {
		    color: #45C4B0 !important;
		    font-size: 32rpx !important;
		    font-weight: bold !important;
			padding: 0 !important;
			min-width: none !important;
		}
		.u-button__text{
			font-size: 32rpx !important;
			font-weight: bold !important;
		}
		.dlbox{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.dltxt{
				font-size: 24rpx;
				font-weight: bold;
				letter-spacing: 0.08em;
				color: #45C4B0;
				text{
					font-size: 24rpx;
					color: #999999;
					font-weight: 500;
				}
			}
		}
	}
</style>